<template>
  <div>
    <el-button type="primary" @click="goToEditPage()">新建图文消息</el-button>
    <p>当前文章列表链接: http://ymd.dzfinvest.com/#/articleList/{{currentGid}}
      <el-button
        type="text"
        class="button copylink"
        @click="copyHandler"
        :data-clipboard-text="`http://ymd.dzfinvest.com/#/articleList?gid=${currentGid}`"
      >
        复制链接
      </el-button>
    </p>
    <div class="main-content">
      <el-row>
        <el-col :xs="24" :sm="24" :md="18" :lg="20">
          <el-card
            :body-style="{ padding: '0px' }"
            :class="$style.card"
            v-for="item in list"
            :key="item.id"
          >
            <div slot="header" :class="$style.cardHeader">
              <span>更新于 {{item.updTime}}</span>
              <el-button
                type="text"
                class="button copylink"
                @click="copyHandler"
                :data-clipboard-text="`http://ymd.dzfinvest.com/#/article/${item.id}`"
              >
                复制链接
              </el-button>
            </div>
            <div :class="$style.cardBody">
              <p>{{item.title}}</p>
              <img :src="item.picture" :class="$style.cardImg" />
            </div>
            <div class="card-footer">
              <el-button type="text" class="button" @click="goToEditPage(item.id)">编辑</el-button>
              <el-popover width="180">
                <el-select
                  :value="item.gid"
                  @input="val => {groupSelect(val, item.id)}"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="group in groupList"
                    :key="group.id"
                    :label="group.name"
                    :value="group.id"
                  >
                  </el-option>
                </el-select>
                <el-button type="text" slot="reference" class="button" :class="$style.cardBtn">分组</el-button>
              </el-popover>
              <el-button type="text" class="button" @click="deleteHandler(item.id)">删除</el-button>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="6" :lg="4">
          <el-card class="box-card">
            <div slot="header">
              <el-button type="primary" @click="addCate">新增分组</el-button>
               <div :class="$style.addCateWrapper" v-if="isShowAddCateWrapper">
                <el-input v-model="newCateName" placeholder="请输入内容"></el-input>
                <el-button type="text" @click="confirmAddCate">确认</el-button>
                <el-button type="text" @click="cancelAddCate">取消</el-button>
              </div>
            </div>
            <a
              v-for="(group, index) in groupList"
              :key="group.id"
              :class="[$style.cateItem, {
                [$style.active]: index === currentCateIndex
              }]"
              @click.prevent="cateClickHander(index, group.id)"
            >
              {{group.name}}
              <i
                class="el-icon-close"
                :class="$style.close"
                @click.stop="deleteGroup(group.id, group.name)"
              >
              </i>
            </a>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="currentPageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Clipboard from 'clipboard'
import * as apis from 'services/graphicMsg'

export default {
  name: 'GraphicMsg',
  computed: {
    ...mapState({
      list: state => state.graphicMsg.list,
      total: state => state.graphicMsg.total,
      groupList: state => state.graphicMsg.groupList,
    }),
  },
  data() {
    return {
      currentPage: 1,
      currentPageSize: 10,
      currentCateIndex: 0,
      currentGid: 0,
      newCateName: '',
      isShowAddCateWrapper: false,
    }
  },
  created() {
    this.$store.dispatch('getArticleList')
    this.$store.dispatch('getImgTextGroupList')
  },
  methods: {
    goToEditPage(id) {
      if (id) {
        this.$router.push({
          path: '/graphicMsgEdit',
          query: { id },
        })
      } else {
        this.$router.push('/graphicMsgEdit')
      }
    },
    handleSizeChange(pageSize) {
      this.currentPageSize = pageSize
      this.$store.dispatch('getArticleList', {
        pageSize,
        page: this.currentPage,
      })
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.$store.dispatch('getArticleList', {
        page,
        pageSize: this.currentPageSize,
      })
    },
    copyHandler() {
      const clipboard = new Clipboard('.copylink')
      clipboard.on('success', () => {
        this.$message('复制成功!')
      })
    },
    cancelAddCate() {
      this.isShowAddCateWrapper = false
    },
    addCate() {
      this.isShowAddCateWrapper = true
    },
    confirmAddCate() {
      if (!this.newCateName) return

      apis.addImgTextGroup(this.newCateName)
        .then(() => {
          this.isShowAddCateWrapper = false
          this.newCateName = ''
          this.$store.dispatch('getImgTextGroupList')
        })
    },
    cateClickHander(index, gid) {
      this.currentCateIndex = index
      this.currentGid = gid
      this.$store.dispatch('getArticleList', {
        page: this.currentPage,
        pageSize: this.currentPageSize,
        gid,
      })
    },
    groupSelect(gid, id) {
      this.$store.dispatch('imgTextGrouping', { gid, id })
    },
    deleteGroup(id, name) {
      this.$confirm(`确认要删除${name}这个分组吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(() => {
        apis.deleteImgTextGroup(id)
      })
      .then(() => {
        this.$store.dispatch('getImgTextGroupList')
      })
    },
    deleteHandler(id) {
      this.$confirm('确认要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(() => {
        apis.delArticle(id)
      })
      .then(() => {
        this.$store.dispatch('getArticleList')
      })
    },
  },
}
</script>

<style module lang="scss">
.card {
  width: 300px;
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 20px;
}

.cardHeader {
  color: #666;
  font-size: 14px;
  button {
    padding: 0;
    margin-left: 6px;
  }
}

.cardImg {
  width: 100%;
  height: 180px;
}


.cateItem {
  display: block;
  cursor: pointer;
  padding: 10px 6px;
  &:hover {
    background-color: #eef1f6;
  }
  &:not(:first-child):hover {
    .close {
      opacity: 1;
    }
  }
}

.active {
  background-color: #eef1f6;
}

.addCateWrapper {
  padding: 6px 0;
  input {
    margin-bottom: 6px;
  }
}

.close {
  opacity: 0;
  font-size: 10px;
  float: right;
  padding: 3px;
}

.cardBtn {
  margin-right: 4px;
}

.cardBody {
  p {
    padding: 12px 20px;
    margin: 0;
  }
}
</style>
